<template>
  <!-- class="app-container" -->
  <div>
    <mt-field
      v-model="value2"
      :label="label"
      :placeholder="placeholder"
      :type="passwordType"
    >
      <mt-button align="center" :class="iconEye" @click.native="showPassword" />
    </mt-field>
  </div>
</template>

<script>
export default {
  name: 'Password',
  components: {},
  directives: {},
  filters: {},
  props: {
    value: { type: String, default: '' },
    label: { type: String, default: '' },
    placeholder: { type: String, default: '请输入密码' }
  },

  data() {
    return {
      passwordType: 'password'
    }
  },
  computed: {
    value2: {
      get() {
        return this.value
      },
      set(val) {
        this.$emit('input', val)
      }
    },

    iconEye: function() {
      if (this.passwordType === 'password') {
        return 'el-icon-remove-outline'
      } else {
        return 'el-icon-view'
      }
    }
  },
  async created() {
    //
  },

  methods: {
    showPassword() {
      if (this.passwordType === 'password') {
        this.passwordType = ''
      } else {
        this.passwordType = 'password'
      }
    }
  }
}
</script>

<style type="text/css"></style>
